<template>
  <div class="app-container">
    <el-form
      ref="form"
      :inline="true"
      :model="formData"
      class="demo-form-inline"
    >
      <el-form-item label="订单号">
        <el-input
          v-model="formData.orderNo"
          placeholder="请输入订单号"
        ></el-input>
      </el-form-item>

      <el-form-item label="手机号码">
        <el-input
          v-model="formData.phone"
          placeholder="请输入手机号码"
        ></el-input>
      </el-form-item>

      <el-form-item label="三方订单号">
        <el-input
          v-model="formData.mtOrderId"
          placeholder="请输入三方订单号"
        ></el-input>
      </el-form-item>

      <el-form-item label="三方券码号">
        <el-input
          v-model="formData.mtSerialNumbers"
          placeholder="请输入三方券码号"
        ></el-input>
      </el-form-item>

      <el-form-item label="物流时间">
        <el-date-picker
          v-model="formData.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column prop="id" label="Id" width="180"></el-table-column>
      <el-table-column
        prop="orderNo"
        label="订单号"
        width="180"
      ></el-table-column>
      <el-table-column prop="phone" label="客户电话"></el-table-column>
      <el-table-column prop="shopName" label="店铺名字" width="180">
      </el-table-column>
      <el-table-column prop="conpouPrice" label="结算金额">
        <template slot-scope="scope"
          >{{ scope.row.conpouPrice.toFixed(2) }}（元）</template
        >
      </el-table-column>
      <el-table-column prop="mtOrderId" label="三方订单号"></el-table-column>
      <el-table-column
        prop="mtSerialNumbers"
        label="三方券码号"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
      ></el-table-column>
    </el-table>

    <pagination
      v-if="queryParams.total > 0"
      :total="queryParams.total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      @pagination="getListData"
    />
  </div>
</template>

<script>
import { getVerificationLogList } from "@/api/order/index";
import { setStartOfDay, setEndOfDay } from "@/utils/tool";
export default {
  data() {
    return {
      loading: false,
      queryParams: {
        page: 0,
        limit: 0,
        total: 0,
      },
      formData: {
        orderNo: "",
        phone: "",
        mtOrderId: "",
        dateRange: "",
        mtSerialNumbers: "",
      },
      list: [],
    };
  },

  created() {
    this.getListData({
      page: 1,
      limit: 10,
    });
  },
  methods: {
    onSearch() {
      this.queryParams = {
        ...this.formData,
      };
      this.getListData({
        page: 1,
        limit: 10,
      });
    },
    reset() {
      this.formData = {
        orderNo: "",
        phone: "",
        mtOrderId: "",
        mtSerialNumbers: "",
        dateRange: "",
      };
    },
    getListData({ page, limit }) {
      this.loading = true;
      const params = {
        ...this.queryParams,
        startTime: this.formData.dateRange
          ? setStartOfDay(this.formData.dateRange[0])
          : "",
        endTime: this.formData.dateRange
          ? setEndOfDay(this.formData.dateRange[1])
          : "",
      };
      getVerificationLogList(
        params,
        page || this.queryParams.page + 1,
        limit || this.queryParams.limit
      )
        .then(({ data }) => {
          this.list = data.records;
          this.queryParams.total = data.total;
          this.queryParams.page = data.current;
          this.queryParams.limit = data.size;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
